import { Text, View } from '@tarojs/components'
import { Tabs, TabPane } from '@nutui/nutui-react-taro'
import { useState } from 'react'
import EmptyState from '../../components/empty-state'
import OrderCard from '../../components/order-card'
import Layout from '../../components/layout'
import { useNavigation } from '../../hooks/useNavigation'
import { showSuccess, showModal } from '../../utils/toast'
import './index.less'

interface Order {
  id: string
  date: string
  status: 'pending' | 'in_progress' | 'completed'
  statusText: string
  statusColor: string
  amount: string
  project: string
  address: string
}

const Order = () => {
  const [activeTab, setActiveTab] = useState(0)
  const { navigateTo } = useNavigation()

  // 模拟订单数据
  const orders: Order[] = [
    {
      id: '20230815123456',
      date: '2023-08-15',
      status: 'pending',
      statusText: '待开始',
      statusColor: 'pending',
      amount: '¥15,000',
      project: '老房翻新改造',
      address: '上海市浦东新区张江高科技园区'
    },
    {
      id: '20230810123456',
      date: '2023-08-10',
      status: 'in_progress',
      statusText: '进行中',
      statusColor: 'in_progress',
      amount: '¥28,000',
      project: '豪华改造套餐',
      address: '上海市徐汇区淮海中路'
    },
    {
      id: '20230805123456',
      date: '2023-08-05',
      status: 'completed',
      statusText: '已完成',
      statusColor: 'completed',
      amount: '¥18,000',
      project: '基础改造套餐',
      address: '上海市静安区南京西路'
    },
    {
      id: '20230728123456',
      date: '2023-07-28',
      status: 'completed',
      statusText: '已完成',
      statusColor: 'completed',
      amount: '¥12,000',
      project: '卫浴翻新',
      address: '上海市黄浦区人民广场'
    }
  ]

  const getFilteredOrders = () => {
    if (activeTab === 0) return orders // 全部
    if (activeTab === 1) return orders.filter(order => order.status === 'in_progress') // 进行中
    if (activeTab === 2) return orders.filter(order => order.status === 'completed') // 已完成
    return orders
  }

  const handleTabChange = (index: number) => {
    setActiveTab(index)
  }

  const handleOrderClick = (orderId: string) => {
    navigateTo({
      url: '/pages/order-details/index',
      params: { id: orderId },
    })
  }

  const handleActionClick = (action: string, orderId: string) => {
    switch (action) {
      case 'start':
        showSuccess('开始施工')
        break
      case 'progress':
        navigateTo({
          url: '/pages/order-progress/index',
          params: { id: orderId },
        })
        break
      case 'rebook':
        navigateTo({
          url: '/pages/booking/index',
          params: { orderId },
        })
        break
      case 'contact':
        showModal({
          title: '联系客服',
          content: '客服电话：400-123-4567',
          showCancel: false,
        })
        break
    }
  }

  const renderOrderList = (orderList: Order[]) => {
    if (orderList.length === 0) {
      return (
        <EmptyState
          icon='📋'
          title='暂无订单'
          description='您还没有任何订单记录'
          buttonText='立即预约'
          onButtonClick={() => navigateTo('/pages/home/index')}
        />
      )
    }

    return (
      <View className='order-list'>
        {orderList.map((order) => (
          <OrderCard
            key={order.id}
            order={{
              id: order.id,
              orderNo: order.id,
              date: order.date,
              status: order.status,
              statusText: order.statusText,
              amount: order.amount,
              projectName: order.project,
              address: order.address,
            }}
            onClick={() => handleOrderClick(order.id)}
            onAction={(action) => handleActionClick(action, order.id)}
          />
        ))}
      </View>
    )
  }

  return (
    <Layout title='我的订单'>
      <View className='order-container'>
        <Tabs
          value={activeTab}
          onChange={handleTabChange}
          className='order-tabs'
        >
          <TabPane title='全部'>
            {renderOrderList(getFilteredOrders())}
          </TabPane>
          <TabPane title='进行中'>
            {renderOrderList(getFilteredOrders())}
          </TabPane>
          <TabPane title='已完成'>
            {renderOrderList(getFilteredOrders())}
          </TabPane>
        </Tabs>
      </View>
    </Layout>
  )
}

export default Order
